import React, { useState, useList } from "react";
import "./index.scss";
import avatar from "../../images/bozai.png";
import { div } from "three/webgpu";
// 导航 Tab 数组
const tabs = [
  { type: "hot", text: "最热" },
  { type: "time", text: "最新" },
];
// 评论列表数据
const defaultList = [
  {
    // 评论id
    rpid: 3,
    // 用户信息
    user: {
      uid: "13258165",
      avatar:
        "https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/reactbase/comment/zhoujielun.jpeg",
      uname: "周杰伦",
    },
    // 评论内容
    content: "哎哟，不错哦",
    // 评论时间
    ctime: "10-18 08:15",
    // 喜欢数量
    like: 98,
    // 0：未表态 1: 喜欢 2: 不喜欢
    action: 0,
  },
  {
    rpid: 2,
    user: {
      uid: "36080105",
      avatar:
        "https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/reactbase/comment/xusong.jpeg",
      uname: "许嵩",
    },
    content: "我寻你千百度 日出到迟暮",
    ctime: "11-13 11:29",
    like: 88,
    action: 2,
  },
  {
    rpid: 1,
    user: {
      uid: "30009257",
      avatar,
      uname: "黑马前端",
    },
    content: "学前端就来黑马",
    ctime: "10-19 09:00",
    like: 66,
    action: 1,
  },
];

const CommentSection = () => {
  const [list, setList] = useState(defaultList);
  const [tab, setTab] = useState("hot");

  const tangle = (item) => {
    console.log("tangle:", item.type);
    setTab(item.type);
  };
  return (
    <div className="commentSection">
      {/* 评论头部 */}
      <div className="commetHeader">
        <div className="commentTitle">评论</div>
        <div className="commentNum">{list.length}</div>
        <ul className="commetHeaderUl">
          {tabs.map((item) => {
            return (
              <li
                key={item.type}
                className={item.type === tab ? "liSelected" : "li"}
                onClick={() => tangle(item)}
              >
                {item.text}
              </li>
            );
          })}
        </ul>
      </div>
      {/* 发送部分 */}
      <div className="commentSend">
        <div className="myIconBg">
          <img className="myIcon" src={avatar} alt="头像" />
        </div>
        <div className="textareaBg">
          <textarea
            className="textarea"
            name=""
            id=""
            placeholder="发一条友善的评论"
          ></textarea>
        </div>
        <div className="sendBtn">发布</div>
      </div>
      {/* 评论内容 */}
      <div>
        {list.map(() => {
          return (
            <div>
              <div className="contentIconBg">
                <div className="contentIcon"></div>
              </div>
              <div className="contentRight">
                <div className="contentName"></div>
                <div className="contentComment"></div>
                <div className="contentToolBar">
                  <div className="contentTime"></div>
                  <div className="contentLike">
                    <img className="contentLikeImg" src="" alt="" />
                    <div className=""></div>
                  </div>
                  <div className="contentUnlike">
                    <img className="contentUnlikeImg" src="" alt="" />
                  </div>
                  <div className="contentDelete">删除</div>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default CommentSection;
